<template>
    <div id="auto-gen-code">
      <el-card>
        <el-form label-width="80px" inline>
          <el-form-item label="表名">
            <el-select v-model="tableName" placeholder="请选择数据库表名" clearable>
              <el-option v-for="(item,index) of tables" :key="index" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类名">
            <el-input v-model="table.className"/>
          </el-form-item>
          <el-form-item label="表别名">
            <el-input v-model="table.tableAliasName"/>
          </el-form-item>
          <el-form-item label="表前缀">
            <el-input v-model="table.prefix"/>
          </el-form-item>
          <el-form-item label="包名">
            <el-input v-model="table.packageName"/>
          </el-form-item>
          <el-form-item label="注释">
            <el-input v-model="table.desc"/>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="table.author"/>
          </el-form-item>
          <el-form-item label=" ">
            <el-button v-if="buttons.children[1].havePermission" :type="buttons.children[1].buttonColor" size="mini" @click="gen(buttons.children[1])">{{buttons.children[1].name}}</el-button>
            <el-button v-if="buttons.children[2].havePermission" :type="buttons.children[2].buttonColor" size="mini" @click="gen(buttons.children[2])">{{buttons.children[2].name}}</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="table.tableColumns" border style="width: 100%" height="510px">
          <el-table-column
            prop="columnName"
            label="字段名">
          </el-table-column>
          <el-table-column
            prop="jdbcType"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="propertyName"
            label="别名">
          </el-table-column>
          <el-table-column
            prop="fullJavaType"
            label="JAVA类型">
          </el-table-column>
          <el-table-column
            prop="desc"
            label="注释">
          </el-table-column>
          <!--<el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-link type="primary" v-if="scope.row.haveLeftJoin" icon="el-icon-edit" @click="edit(scope.row)">设置外联字段</el-link>
            </template>
          </el-table-column>-->
        </el-table>
      </el-card>

      <el-dialog v-if="setLeftJoinDialogShow" title="设置外联字段" :visible.sync="setLeftJoinDialogShow">
        <set-left-join @choseLeftJoin="chose" :buttons="buttons" :base-set-content="setLeftJoinColumn"></set-left-join>
      </el-dialog>
    </div>
</template>

<script>
  import {mapState} from 'vuex'
  import setLeftJoin from './set-left-join'
    export default {
      components:{
        setLeftJoin
      },
      computed:{
        ...mapState({
          buttons:state=>state.manager.buttons
        })
      },
        name: "auto-gen-code",
      data(){
        return{
          setLeftJoinDialogShow:false,
          setLeftJoinColumn:{},
          tableName:'',
          tables:[],
          table:{}
        }
      },
      mounted() {
        this.init()
      },
      watch:{
        'tableName':function(){
          if (this.common.isNotEmpty(this.tableName)){
            this.getColumns()
          } else{
            this.table = {}
          }
        }
      },
      methods:{
        chose(content){
          this.setLeftJoinDialogShow = false
          if (this.common.isEmpty(this.table.leftJoinColumns)){
            this.table.leftJoinColumns = []
          }
          this.table.leftJoinColumns.push(content)
        },
        edit(content){
          this.setLeftJoinColumn = $.extend(true,{},content)
          this.setLeftJoinDialogShow = true
        },
        gen(button){
          if (this.common.isEmpty(this.table.tableName)){
            this.common.layMsgAutoClose({type:'e',msg:'请选择表'})
            return
          }
          console.log(this.table)
          let param = $.extend(true,{},this.table)
          param.tableColumns = []
          this.common.request({
            url: button.target,
            param:{
              tableStr:JSON.stringify(param)
            },
            permission:button.id,
            success:res=>{
              if (res.code == 1){
                this.common.layMsgAutoClose({msg:res.msg})
              }
            }
          })
        },
        getColumns(){
          this.common.request({
            url:this.buttons.children[0].target,
            param:{
              tableName: this.tableName
            },
            permission:this.buttons.children[0].id,
            success:res=>{
              if (res.code == 1){
                  this.table = res.data.rows[0]
              }
            }
          })
        },
        init(){
          this.common.request({
            url:this.buttons.target,
            permission:this.buttons.id,
            loading:false,
            success:res=>{
              if (res.code == 1) {
                this.tables = res.data.rows
              }
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
